<template>
	<view>
		<!-- <image class="order-bg" mode="widthFix" :src="imageUrl +'list/bg.png'"> -->
		<u-sticky>
			<view class="m-head1">
				<image class="bg" mode="widthFix" :src="imageUrl +'list/bg1.png'"></image>
				<u-navbar @rightClick="rightClick" leftText="我的申诉" placeholder :autoBack="true" :safeAreaInsetTop="true"
					:bgColor="bgColor">
				</u-navbar>
				<view class="wp">
					<view class="ul-tabd1">
						<view class="li" v-for="(item, index) in tabList" :key="index"
							:class="actNum == index ? 'on' : ''" @click="actNum = index">{{ item.tit }}</view>
					</view>
				</view>
			</view>
		</u-sticky>
		<view class="row-order">
			<view class="wp">
				<view v-if="actNum == 0">
					<view class="ul-order">
						<view class="li" v-for="item in 6">
							<navigator url="" hover-class="none" class="con">
								<view class="top">
									<view class="left">
										<view class="tit">鄂E · E12345</view>
										<view class="ps">
											<image class="bg" mode="widthFix" :src="imageUrl +'list/bg2.png'">
												<view class="span">已认证</view>
										</view>
									</view>
									<view class="right">申诉已成功</view>
								</view>
								<view class="info">
									八方来财停车场|02小时23分钟|¥23
								</view>
								<view class="inner">
									<view class="desc">
										<view class="p">
												申诉原因详情申诉原因详情申诉原因详情申诉原因详情申诉原因详情申诉原因详情申诉原因详情申诉原因详情
										</view>
									</view>
								</view>
								<view class="dw">
									<view class="price">
										申诉原因
									</view>
									<view class="btns">
										<view class="btn btn4">
											查看
										</view>
									</view>
								</view>
							</navigator>
						</view>
					</view>
				</view>
				<view v-if="actNum == 1">
					<view class="ul-order">
						<view class="li" v-for="item in 6">
							<navigator url="" hover-class="none" class="con">
								<view class="top">
									<view class="left">
										<view class="tit">鄂E · E12345</view>
										<view class="ps">
											<image class="bg" mode="widthFix" :src="imageUrl +'list/bg2.png'">
												<view class="span">已认证</view>
										</view>
									</view>
									<view class="right right2">申诉已驳回</view>
								</view>
								<view class="info">
									八方来财停车场|02小时23分钟|¥23
								</view>
								<view class="inner">
									<view class="desc">
										<view class="p">
												申诉原因详情申诉原因详情申诉原因详情申诉原因详情申诉原因详情申诉原因详情申诉原因详情申诉原因详情
										</view>
									</view>
								</view>
								<view class="dw">
									<view class="price">
										申诉原因
									</view>
									<view class="btns">
										<view class="btn btn4">
											查看
										</view>
									</view>
								</view>
							</navigator>
						</view>
					</view>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	import mList from '@/components/m-list.vue';
	export default {
		components: {
			mList
		},
		data() {
			return {

				// 头部背景色
				bgColor: 'transparent',
				actNum: 0,

				tabList: [{
						tit: '已成功'
					},
					{
						tit: '已驳回'
					},
				],
				actNumch: 0,
				list1: [{
					name: '全部',
				}, {
					name: '免费离开',
				}, {
					name: '付费离开'
				}, {
					name: '欠费离开'
				}, ],
				array: ['鄂 · EE12345', '鄂 · EE12346', '鄂 · EE12347', ],
				index: 0,

			}
		},
		methods: {
			// 头部滚动
			onPageScroll(res) {
				if (res.scrollTop >= 60) {
					this.bgColor = 'transparent'
				} else {
					this.bgColor = 'transparent'
				}
			},
			bindPickerChange: function(e) {
				console.log('picker发送选择改变，携带值为', e.detail.value)
				this.index = e.detail.value
			},

		}
	}
</script>

<style>
	page {
		background-color: #F4FAF7;
	}
	.ul-order{
		padding-bottom: 60rpx;
		padding-top: 20rpx;
	}
	.ul-order .li{
		margin-bottom: 20rpx;
	}
	.ul-order .con{
		padding: 20rpx;
		border-radius: 20rpx;
		background-color: #fff;
		display: block;
		
	}
	.ul-order .top{
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.ul-order .top .left{
		display: flex;
		align-items: center;
	}
	.ul-order .top .tit{
		color: #1C274C;
		font-size: 36rpx;
		font-weight: 600;
	}
	.ul-order .top .ps{
		position: relative;
		margin-left: 10rpx;
	}
	.ul-order .top .ps .bg{
		display: block;
		width: 110rpx;
		height: 32rpx;
	}
	.ul-order .top .ps .span{
		display: inline-block;
		position: absolute;
		right: 18rpx;
		color: #fff;
		font-size: 20rpx;
		font-weight: 500;
		top: 50%;
		transform: translateY(-50%);
	}
	.ul-order .top .right{
		font-size: 24rpx;
		color: #24A7CE;
	}
	.ul-order .top .right2{
		color: #FF2C41;
	}
	.ul-order .inner {
		background: linear-gradient(90deg, #F4FAF7 0%, rgba(244, 250, 247, 0) 100%);
		border-radius: 8px;
		padding: 20rpx ;
		margin: 20rpx 0;
	
	}
	.ul-order .inner .box{
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.ul-order .inner .box .video{
		display: inline-block;
		border-radius: 30rpx;
		background-color: rgba(36, 167, 206, 0.1);
		padding: 0 20rpx;
		font-size: 24rpx;
		color: #24A7CE;
		line-height: 48rpx;
	}
	.ul-order .inner .box .video .camera{
		display: inline-block;
		width: 24rpx;
		height: 24rpx;
		vertical-align: middle;
		margin-right: 10rpx;
	}
	.ul-order .inner .time{
		font-size: 24rpx;
		color: #1C274C;
		display: flex;
		align-items: center;
	}
	.ul-order .inner .time .span2{
		display: inline-block;
		vertical-align: middle;
		color: #5ADA7A;
		font-weight: 600;
		font-size: 48rpx;
	}
	.ul-order .inner .time2 .span2{
		color: #FF2C41;
	}
	.ul-order .inner .desc .p{
		display: flex;
		align-items: center;
		font-size: 20rpx;
		color: rgba(28, 39, 76, 0.6);
		margin-top: 10rpx;
	}
	.ul-order .inner .desc .p .icon{
		display: block;
		width: 24rpx;
		height: 24rpx;
		margin-right: 6rpx;
	}
	.ul-order .dw{
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.ul-order .dw .price{
		display: flex;
		align-items: center;
		color: rgba(28, 39, 76, 0.6);
		font-size: 24rpx;
	}
	.ul-order .dw .price .span3{
		font-weight: 600;
		font-size: 36rpx;
	}
	.ul-order .dw .price .span4{
		color: rgba(28, 39, 76, 0.6);
		font-size: 20rpx;
	}
	.ul-order .dw .price .vxpay{
		display: block;
		width: 24rpx;
		height: 24rpx;
		margin: 0 5rpx 0 20rpx;
	}
	.ul-order .dw .btns{
		display: flex;
		align-items: center;
	}
	.ul-order .dw .btn{
		border-radius: 30rpx;
		border: 1px solid rgba(28, 39, 76, 0.1);
		line-height: 48rpx;
		padding: 0 40rpx;
		display: inline-block;
		font-size: 24rpx;
		color: rgba(28, 39, 76, 0.6);
		margin-left: 10rpx;
	}
	.ul-order .dw .btn1{
		background-color: rgba(255, 44, 65, 0.1);
		border-color: rgba(255, 44, 65, 0.1);
		color: #FF2C41;
	}
	.ul-order .dw .btn4{
		color: #24A7CE;
		background-color: rgba(36, 167, 206, 0.1);
		border-color: transparent;
	}
	.ul-order .info{
		margin: 20rpx 0;
		color: rgba(28, 39, 76, 0.6);
		font-size: 24rpx;
	}
</style>